<template>
	<!-- 	<view>
		<view v-if="show" class="modalMask">
		</view>
		<view v-if="show" class="modalDialog">
			<view class="modalHint" v-if="title">{{ title }}</view>
			<slot></slot>
			<button class="modalButton" v-if="showConfirm" @click="onConfirm">{{confirmText}}</button>
			<icon class="closeIcon" type="cancel" size="48rpx" color="#666" v-if="showClose" @click="onClose"></icon>
		</view>
	</view> -->

	<view class="modal-content show" v-if="modalStatus">
		<view class="modal-box" :style="{height: height+'rpx'}">
			<view v-if="isShowClose" class="close-modal" @click='onClose'>
				<icon type="cancel" size="28" color="#fff"></icon>
			</view>
			<view v-if="isTitle" class="modal-tit">{{title}}</view>
			<slot></slot>
			<view class="modalBot" v-if="!isShowCancel">
				<view v-if="isShowConfirm" class="btnConfirm" @click='onConfirm'>{{ confirmText }}</view>
			</view>
			<view class="modalBot modalCancel" :class="[isCenter?'isCenter':'']" v-if="isShowCancel">
				<view v-if="isShowCancel" class="btnConfirm btnCancel" @click='onCancel'>{{ cancelText }}</view>
				<view v-if="isShowConfirm" class="btnConfirm" @click='onConfirm'>{{ confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "scModal",
		data() {
			return {
				modalStatus: this.show,
			};
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			// 弹窗默认高度
			height: {
				type: [String, Number],
				default: 650
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			isShowCancel: {
				type: Boolean,
				default: false
			},
			isShowClose: {
				type: Boolean,
				default: false
			},
			isShowConfirm: {
				type: Boolean,
				default: true
			},
			//按钮位置：true居中，false左对齐
			isCenter: {
				type: Boolean,
				default: false
			},
			isTitle: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: '标题'
			},
		},
		watch: {
			show(newVal, oldVal) {
				// console.log('show',newVal,oldVal)
				this.modalStatus = newVal
			},
		},

		methods: {
			onClose() {
				var popup = {
					show: false,
					type: -1
				}
				this.$emit('change', popup)
			},

			onCancel() {
				var popup = {
					show: false,
					type: 0
				}
				this.$emit('change', popup)
			},

			onConfirm() {
				var popup = {
					show: false,
					type: 1
				}
				this.$emit('change', popup)
			},

		}

	}
</script>

<style>
	.modal-content {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 999;
		text-align: left;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.modal-box {
		position: absolute;
		width: 650rpx;
		height: 500rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 8rpx;
		background-color: #fff;
		transition: opacity 0.2s ease-in;
		opacity: 0;
	}

	.modal-content.show .modal-box {
		opacity: 1;
	}
	
	.modal-tit{
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		padding-top: 26rpx;
		/* border: solid aqua; */
	}

	.modalBot {
		position: absolute;
		display: flex;
		width: 100%;
		/* height: 110rpx; */
		bottom: 0;
		left: 0;
		z-index: 99;
		justify-content: flex-end;
		padding: 30rpx;
		padding-left: 288rpx;
		/* border: 1rpx solid coral; */
	}
	
	.modalBot.isCenter{
		padding-left: 0rpx;
	}

	.modalCancel {
		/* width: 600rpx; */
		/* margin-left: -300rpx; */
	}

	.btnConfirm {
		flex: 1;
		height: 60rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 8rpx;
		background: linear-gradient(271deg, #389BFE 0%, #1572F9 100%);
	}

	.btnCancel {
		color: #0363FA;
		background: #fff;
		border: 1rpx solid #0363FA;
		margin: 0rpx 36rpx 0rpx 30rpx;
	}

	.close-modal {
		position: absolute;
		bottom: -140rpx;
		left: 50%;
		width: 64rpx;
		height: 64rpx;
		margin-left: -32rpx;
		z-index: 99;
	}
</style>
